<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@include file="/sunzbase.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<z:resource items="easyui"></z:resource>
<title>笔记列表</title>
<link rel="stylesheet" href="${webRoot}/resources/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style type="text/css">
.table td{
	text-align: center;
}
u{
	text-decoration: none;
}
u:hover {
	color: red; 
	text-decoration:underline;
} 
</style>
	<style type="text/css">
.ztree * {font-size: 10pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}
.ztree li ul{ margin:0; padding:0}
.ztree li {line-height:30px;}
.ztree li a {width:200px;height:30px;padding-top: 0px;}
.ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
.ztree li a span.button.switch {visibility:hidden}
.ztree.showIcon li a span.button.switch {visibility:visible}
.ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}
.ztree li span {line-height:30px;}
.ztree li span.button {margin-top: -7px;}
.ztree li span.button.switch {width: 16px;height: 16px;}

.ztree li a.level0 span {font-size: 150%;font-weight: bold;}
.ztree li span.button {background-image:url("${webRoot}/resources/lib/zTree/v3/css/zTreeStyle/img/left_menuForOutLook.png"); *background-image:url("${webRoot}/resources/lib/zTree/v3/css/zTreeStyle/img/left_menuForOutLook.gif")}
.ztree li span.button.switch.level0 {width: 20px; height:20px}
.ztree li span.button.switch.level1 {width: 20px; height:20px}
.ztree li span.button.noline_open {background-position: 0 0;}
.ztree li span.button.noline_close {background-position: -18px 0;}
.ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
.ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
	</style>
</head>
<body>
<div class="pos-a" style="width:199px;left:0;top:40px; bottom:0; height:100%; border-right:1px solid #e5e5e5; background-color:#f5f5f5; overflow:auto;">
	<ul id="treeDemo" class="ztree"></ul>
</div>	
<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 笔记管理 <span class="c-gray en">&gt;</span> 笔记列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container" style="margin-left:199px;">
	<div class="text-c">	
	<form id="noteForm">
	 <span class="select-box inline">
		<select name="sel_class" id="sel_class" class="select" style="width:100%">
		</select>
		</span>
	 <span class="select-box inline">
		<select id="noteState" name="noteState" class="select">
					<option selected="selected" value="0">所有笔记</option>
					<option value="1">个人笔记</option>
				</select>
		</span> 日期范围：
		<input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })" id="logmin" name="logmin" class="input-text Wdate" style="width:120px;">
		-
		<input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })" id="logmax" name="logmax" class="input-text Wdate" style="width:120px;">
		<input type="text" name="noteText" id="noteText" placeholder=" 笔记名称" style="width:250px" class="input-text">
		<button name="noteSearch" id="noteSearch" class="btn btn-success" type="button"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
	</form>
	</div>
	<div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> <a class="btn btn-primary radius" data-title="添加笔记" data-href="note/noteAdd" onclick="article_add('添加笔记','note/noteAdd')" href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加笔记</a></span> </div>
	<div class="mt-20">
		<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive" width=100% >
			<thead>
				<tr class="text-c">
					<th><input type="checkbox" name="" id="allChk" value=""></th>
					<th>编号</th>
					<th>标题</th>
					<th>作者</th>
					<th>权限</th>
					<th>分类</th>
					<th>创建时间</th>
					<th>最后修改时间</th>
					<th>浏览次数</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr class="text-c">
					<td><input type="checkbox" value="" name=""></td>
					<td></td>
					<td class="text-l"></td>
					<td></td>
					<td></td>
					<td id="tag_id"></td>	
					<td></td>
					<td></td>
					<td></td>
					<td class="f-14 td-manage"></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<!-- <div id="rMenu">
	<ul>
		<li id="m_add" onclick="addTreeNode();">新建文件夹</li>
		<li id="m_del" onclick="removeTreeNode();">删除文件夹</li>
		<li id="m_rename">重命名</li>
		<li id="copy" onclick="return false;">复制</li>
		<li id="cut" onclick="return false;">剪切</li>
		<li id="paste" onclick="return false;">粘贴</li>
	</ul>
</div> -->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${webRoot}/resources/lib/My97DatePicker/4.8/calendar.js"></script> 
<script type="text/javascript" src="${webRoot}/resources/lib/My97DatePicker/4.8/skin/default/datepicker.css"></script> 
<script type="text/javascript" src="${webRoot}/resources/lib/My97DatePicker/4.8/lang/zh-cn.js"></script> 
<script type="text/javascript" src="${webRoot}/resources/lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="${webRoot}/resources/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="${webRoot}/resources/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="${webRoot}/resources/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>

<script type="text/javascript">
var data;
function displaynavbar(obj){
	if($(obj).hasClass("open")){
		$(obj).removeClass("open");
		$("body").removeClass("big-page");
		$(".pos-a").css('display','block'); 
		$(".page-container").css("marginLeft","199px");
	} else {
		$(obj).addClass("open");
		$("body").addClass("big-page");
		$(".pos-a").css('display','none'); 
		$(".page-container").css("marginLeft","0px");
	}
}

	$.ajax({
		url:"note/allClass2",
		data:{},
		dataType:"json",
		success:function(result){
			if(result.success){
				data=result.data.classList;
				data=parseTreeJson(data);
				$("#sel_class").combotree({
					 data:[{id:"0",text:"全部分类",children:data}]
					// data:data
				}); 
				$("#sel_class").combotree("setValue",0);
			}
		},
		error:function(){}
	});
	function parseTreeJson(data){
		for(var i=0;i<data.length;i++){
			var item=data[i];
			item.text=data[i].tagName;
			item.children=item.childs;
			parseTreeJson(item.children);
		}
		return data;
	}
	//获取搜索中各选项的值
	function getParameters(){
		var params = $("#noteForm").serializeArray();
		//console.log(params);
		var values = {};
		for (var item in params) {
		   values[params[item].name] = params[item].value;
		}
		//console.log(values);
		return values;
	}
	/* 搜索 */
	$("#noteSearch").on("click",function(){
		var datatable = $('.table-sort').DataTable();
		//console.log(datatable);
		//datatable.ajax.url( '${webRoot}/note/searchUser' ).load();
		datatable.settings()[0].ajax.data = getParameters();
		datatable.ajax.reload();
	});
	//datatables设置
	$('.table-sort').dataTable({
		"aaSorting": [[ 6, "desc" ]],//默认第几个排序
		"bStateSave": true,//状态保存
		"pading":false,
		"aoColumnDefs": [
		  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
		  {"orderable":false,"aTargets":[0,1,5,9]}// 不参与排序的列
		],
		"ajax":{
			url:"note/noteDatas",
			type:"post",
			data:getParameters()
		},
		 columns:[
		 	  { "data": null,width: '2%',"render":function(data,type,full,meta){
		 		  return '<input type="checkbox" onclick="check()" name="items" value="'+data.id+'">';
		 		  } 
		 	  }, 
		   	  { "data": null, width: '3%',defaultContent: ""},   
		   	  { "data": null, "render":function(data,type,full,meta){
		   		  return '<u style="cursor:pointer" class="text-primary" onClick="article_edit(\'查看\',\'note/noteShow?id='+data.id+'&tagId='+data.tagId+'\','+data.id+')" title="查看">'+data.title+'</u>';
		   	  	}
		   	  },  
			  { "data": "username",width: '8%' },
		   	  { "data": null, width: '5%',"render":function (data, type, full, meta){
		   		  if(data.noteState==0){
					return "公开";
		   		  }else{
			   		return "仅自己可见";
		   		  }
		   	 	 } 
		   	  },
		   	  { "data": "tagName",width: '5%' },
		   	  { "data": null ,width: '10%',"render":function (data, type, full, meta){
		   		  return formatDate(data.createTime,true);
		   	 	 }
		   	  },
		   	  { "data": null ,width: '10%',"render":function (data, type, full, meta){
		   		  return formatDate(data.modifiedTime,true);
		   	 	 }
		   	  },
			  { "data": "viewsCount",width: '5%' },
		   	  {"data":null ,width: '5%',"render": function ( data, type, full, meta ) {
			   		if("${user.id}" != data.userId){//当前用户id和列表查询出的id不同，则只能查看
			   			return '<u style="cursor:pointer" class="text-primary" onClick="article_edit(\'查看\',\'note/noteShow?id='+data.id+'&tagId='+data.tagId+'\','+data.id+')" title="查看">查看</u>'
			   		}else{
			   	      	return '<a style="text-decoration:none" class="ml-5" onClick="article_edit(\'日志编辑\',\'note/noteAdd?id='+data.id+'\','+data.id+')" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a> <a style="text-decoration:none" class="ml-5" onClick="article_del(this,'+data.id+')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>';
			   		}
		   	      }
		   	  }
		   ],
		   fnDrawCallback : function () {
		        let api = this.api();
		        api.column(1).nodes().each(function(cell, i) {
		            cell.innerHTML = i + 1;
		        });
		    }
	});
	//全选
	$("#allChk").click(function(){
		if(this.checked){
			$("input[name='items']:checkbox").each(function(){
				$(this).attr("checked",true);
			})
		}else{
			$("input[name='items']:checkbox").each(function(){
				$(this).attr("checked",false);
			})
		}
	});
	function check(){	
		if($(":checkbox[name='items']").length==$(":checkbox[name='items']:checked").length){
			 $("#allChk").prop("checked",true);
		} else{
			 $("#allChk").prop("checked",false);
		}
	};
	//批量删除
 function datadel(){
	 var ids=[];
	 if($("input[name='items']:checked").length>0){
		 $("input[name='items']:checked").each(function(){ 
	         ids.push($(this).attr("value"));  
		 })
	 }else{
		 layer.alert("请先选择删除项！");
		 return false;
	 }
		var delIds=ids.join(","); 
		console.log(delIds);
		$.ajax({
			type: 'POST',
			url: 'note/notesDel',
			data:{ids:delIds},
			dataType: 'json',
			success: function(data){
				if(data.success){
					layer.msg('已删除!',{icon:1,time:1000});
					$('#noteSearch').click();					
					$(obj).parents("tr").remove();					
				}else{
					layer.msg('删除失败!',{icon:1,time:1000});
				}
			},
			error:function(data) {
				console.log(data.msg);
			}
		});
 }
/*日志-添加*/
function article_add(title,url,w,h){
	var index = layer.open({
		type: 2,
		title: title,
		content: url
	});
	layer.full(index);
}
/*日志-编辑*/
function article_edit(title,url,id,w,h){
	var index = layer.open({
		type: 2,
		title: title,
		content: url
	});
	layer.full(index);
}
/*日志-删除*/
function article_del(obj,id){
	layer.confirm('确认要删除吗？',function(index){
		$.ajax({
			type: 'POST',
			url: 'note/notesDel',
			dataType: 'json',
			data:{ids:id},
			success: function(data){
				if(data.success){
					$(obj).parents("tr").remove();
					layer.msg('已删除!',{icon:1,time:1000});	
					//window.location.reload();
					$("#noteSearch").click();
				}else{
					layer.msg('删除失败!',{icon:1,time:1000});
				}
			},
			error:function(data) {
				console.log(data.msg);
			},
		});		
	});
}
</script> 
<script type="text/javascript">
var curMenu = null, zTree_Menu = null, zNodes = [];
var setting = {
	view: {
		showLine: false,
		showIcon: false,
		selectedMulti: false,
		addDiyDom: addDiyDom
	},
	data: {
		simpleData: {
			enable: true
		}
	},
	callback: {
		beforeClick: beforeClick,
		onRightClick: OnRightClick,
		onClick: zTreeOnClick
	}
};

function addDiyDom(treeId, treeNode) {
	var spaceWidth = 5;
	var switchObj = $("#" + treeNode.tId + "_switch"),
	icoObj = $("#" + treeNode.tId + "_ico");
	switchObj.remove();
	icoObj.before(switchObj);

	if (treeNode.level > 1) {
		var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
		switchObj.before(spaceStr);
	}
}

function beforeClick(treeId, treeNode) {
	if (treeNode.level == 0 ) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.expandNode(treeNode);
		return false;
	}
	return true;
}

/* 单击事件 */
function zTreeOnClick(event, treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	var id = zTree.getSelectedNodes()[0].id;
	if(id!=0){
		var datatable = $('.table-sort').DataTable();
		datatable.settings()[0].ajax.data = {sel_class: id, noteState: "1", logmin: "", logmax: "", noteText: ""};
		datatable.ajax.reload();
	}
}

function OnRightClick(event, treeId, treeNode) {
	if (treeNode.name == '全部分类') {
		zTree.selectNode(treeNode);
		showRMenu("root", event.clientX, event.clientY);
	} else if (treeNode && !treeNode.noR) {
		zTree.selectNode(treeNode);
		showRMenu("node", event.clientX, event.clientY);
	}
}

function showRMenu(type, x, y) {
	$("#rMenu ul").show();
	if (type=="root") {
		$("#m_add").show();
		$("#m_del").hide();
		$("#m_rename").hide();
		$("#copy").hide();
		$("#cut").hide();
		$("#paste").hide();
	} else {
		$("#m_add").show();
		$("#m_del").show();
		$("#m_rename").show();
		$("#copy").show();
		$("#cut").show();
		$("#paste").show();
	}
	y += document.body.scrollTop;
    x += document.body.scrollLeft;
    rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
	$("body").bind("mousedown", onBodyMouseDown);
}

function hideRMenu() {
	if (rMenu) rMenu.css({"visibility": "hidden"});
	$("body").unbind("mousedown", onBodyMouseDown);
}

function onBodyMouseDown(event){
	if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
		rMenu.css({"visibility" : "hidden"});
	}
}

$(document).ready(function(){
	var treeObj = $("#treeDemo");
	zNodes.push({id:0, pId:0, name:"全部分类", open:true});
	$.ajax({
		url:"note/allClass",
		data:{},
		dataType:"json",
		async:false,
		success:function(result){
			if(result.success){
				for(var i=0;i<result.data.length;i++){		
					zNodes.push({id:result.data[i].id, pId:result.data[i].parentId, name:result.data[i].tagName});
				}
			}
		}
	}); 
	$.fn.zTree.init(treeObj, setting, zNodes);
	zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
	curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
	zTree_Menu.selectNode(curMenu);
	treeObj.hover(function () {
		if (!treeObj.hasClass("showIcon")) {
			treeObj.addClass("showIcon");
		}
	}, function() {
		treeObj.removeClass("showIcon");
	});
});
</script>
</body>
</html>